<template>
  <div class="map-main">
      <div class="btns">
        <div class="btn" :class="{actived: mapType === 'wxdt'}" @click="switchMap('wxdt')">卫星地图</div>
        <div class="btn" :class="{actived: mapType === 'pudt'}" @click="switchMap('pudt')">普通地图</div>
        </div>
      <div class="lnglat" >
        经度：{{ lng }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        纬度：{{ lat }} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      </div>
      <div id="container"></div>
  </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
  props: {
    lng: {
      type: [String, Number],
      default: null
    },
    lat: {
      type: [String, Number],
      default: null
    }
  },
  data() {
    return {
      detaildrawer: false,
      map: null,
      mapType: 'pudt',
      marker: null
    }
  },
  mounted() {
    this.$nextTick(() => {
        this.initMap()
      })
  },
  methods: {
    switchMap(type) {
      this.mapType = type
      this.initMap()
    },
    addMarker(point) {
      if (this.marker) {
        this.map.remove(this.marker)
      } 
      this.marker = new AMap.Marker({
          // position: position,
          position: point.latlan,
          icon: new AMap.Icon({
            size: new AMap.Size(50*0.7, 62*0.7),
            imageSize: new AMap.Size(50*0.7, 62*0.7),
            image:
              '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
            imageOffset: new AMap.Pixel(0, 0)
          }),
          offset: new AMap.Pixel(-13, -30)
        })
        this.marker.setMap(this.map)
     
    },
    initMap() {
      window._AMapSecurityConfig = {
        securityJsCode: 'b84662c937584aa7b912f73ca1b14ebd'
      }
      AMapLoader.load({
        key: 'f472f681a191cf68feaf93f8d8aa6808', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          'AMap.PolygonEditor',
          'AMap.Autocomplete',
          'AMap.PlaceSearch',
          'AMap.AutoComplete',
          'AMap.Geocoder'
          // , 'AMap.RoadInfoSearch'
        ]
        // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map('container', {
            //设置地图容器id
            viewMode: '3D', //是否为3D地图模式
            zoom: 16, //初始化地图级别
            // zoom: 17,      //初始化地图级别
            center:  this.lng ? [this.lng, this.lat] : [93.071387, 29.045426], //初始化地图中心点位置
            layers:
              this.mapType == 'wxdt'
                ? [
                    // 卫星
                    new AMap.TileLayer.Satellite(),
                    // 路网
                    new AMap.TileLayer.RoadNet()
                  ]
                : []
          })
          if (this.lng) {
            this.addMarker({
              latlan: [this.lng, this.lat]
            })
          }
        })
        .catch((e) => {
          console.log(e)
        })
    }
  }
}
</script>

<style scoped lang="scss">
#container {
  padding: 30px;
  margin: 0px;
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  min-height: 300px;
  border: 10px solid #fff;
  border-radius: 10px;
}

.map-main {
  position: relative;
  width: 100%;
  .lnglat {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 99;
    background: #fefefe;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    padding: 10px 14px;
    z-index: 999;
  }
}
.btns {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 99;
  .btn {
    padding: 5px;
    font-size: 12px;
    margin-bottom: 5px;
    background-color: rgba($color: #fff, $alpha: 0.6);
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid #e1e2e3;
    &:hover {
      background-color: rgba($color: $primary-color, $alpha: 0.6);
      color: #fff;
    }
    &.actived {
      background-color: rgba($color: $primary-color, $alpha: 0.6);
      color: #fff;
    }
  }
}
.footerbtn {
  position: absolute;
  bottom: 10px;
  margin: 20px;
}
</style>